<template>
  <h3>组件相关</h3>
  <p>{{ count }}</p>
  <button @click="countAdd">count++</button>
  <hr />
  <Child title="标题" @abc="fn">haha</Child>
</template>

<script setup>
import { provide, ref } from "vue";
// 子组件只需要引入，不需要注册了
import Child from "./Child.vue";

const count = ref(10);

const fn = (n) => {
  console.log("fn", n);
};

const countAdd = () => {
  count.value++;
};

// 依赖注入
// provide的第一个参数key要加引号
// 如果想让响应式生效，传递的时候不能直接传基本数据类型，需要在外面套一个括号，接受的时候多做一步解构
provide("count", {
  count,
  // countAdd,
});
</script>
